<template>
<div>
    <home-header></home-header>
    <home-swiper :swiper-list="swiperList"></home-swiper>
    <home-icons :icons-list="iconsList"></home-icons>
    <home-recommend :recommend-list="recommendList"></home-recommend>
    <home-weekend :weekend-list="weekendList"></home-weekend> 
</div>
</template>
<script>
import HomeHeader from './components/Header.vue'
import HomeSwiper from './components/Swiper.vue'
import HomeIcons from './components/Icons.vue'
import HomeRecommend from './components/Recommend.vue'
import HomeWeekend from './components/Weekend.vue'
import { mapState } from 'vuex'
export default {
    name:'Home',
    data(){
        return{
            lastCity:'',
           swiperList:[],
           iconsList:[],
           recommendList:[],
           weekendList:[]
        }
    },
    methods:{
        getHomeInfo(){
            this.axios.get('/api/index.json').then(this.getHomeInfoSuccess)
        },
        getHomeInfoSuccess(res){
            if(res.data.data && res.data.ret){
                let data = res.data.data;
                this.swiperList = data.swiperList;
                this.iconsList = data.iconsList;
                this.recommendList=data.recommendList;
                this.weekendList = data.weekendList;
            }
            console.log(res.data.data);
        }
    },
    mounted(){
        this.getHomeInfo()
    },
    activated(){
        if(this.lastCity!== this.curCity){
            this.lastCity = this.curCity
            this.getHomeInfo()
        }
    },
    computed:{
        ...mapState({
            curCity:'city'
        })
    },
    components:{
        'home-header':HomeHeader,
        'home-swiper':HomeSwiper,
        'home-icons':HomeIcons,
        'home-recommend':HomeRecommend,
        'home-weekend':HomeWeekend
    }
}
</script>
<style>

</style>